<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body {margin: 0; background-color: #eee;}
		h2, p, input {margin:0; padding: 0;}
		#title {text-align: center;}
		#details {margin-top: 30px;}
		input {width:100px; height:30px; margin-top: 40px;}
		#wrap {margin: 20px 0 0 150px; overflow: hidden;}
		#wrap div{float: left;}
		#Points {width: 150px; height: 100px; border: 1px solid #000; border-right: none !important; background-color: #fd723f}
		#Points p {text-align: center; line-height: 50px; }
		#box {width: 700px; height: 480px; border: 1px solid #000; position: relative; background-color: #ccc;}
		img {position: absolute;}
	</style>
	<script type="text/javascript">
	window.onload = function() {
		var oBtn = document.getElementById('btn');
		var aSpan = document.getElementsByTagName('span');
		var oBox = document.getElementById('box');
		var arr = ['1.png','2.png','3.png','4.png','5.png','6.png','7.png','8.png'];
		var arr2 = ['9.png'];
		var iSpeed = 0;
		var get = 1;
		var lose = 0;

		oBtn.onclick = function () {
			this.value = '游戏正在进行中...';
			this.disabled = true;
			aSpan[0].innerHTML = aSpan[1].innerHTML = 0;
			iSpeed = 0;
			get = 1;
			lose = 0;

			game();
		};


		function game() {
			var oImg = document.createElement('img');	

			oImg.style.width = '24px';
			createImg();

			function createImg() {
				oImg.style.top = 0;
				oImg.src = arr[parseInt( Math.random()*arr.length )];
				oBox.appendChild(oImg);

				iSpeed +=1;								//加速度设置
				oImg.style.left = parseInt( Math.random()*(oBox.offsetWidth - oImg.offsetWidth) ) + 'px';
				doMove(oImg, 'top', iSpeed, oBox.offsetHeight, function() {
					aSpan[1].innerHTML = ++lose;


					if( lose == 5){						//失分5分失败
						oBtn.disabled = false;
						oBtn.value = '开始游戏';
						clearInterval(this.timer)
						oBox.removeChild(oImg, oBox);
						
						alert('再接再厉！！');
						return;
					}

					shake(oBox, 'left',function () {
						createImg();
					});
				});
			}
						
			oImg.onmouseover = function () {

				this.src = arr2[0];
				aSpan[0].innerHTML = get;

				if ( get == 25 ) {						//得分25分获胜
					oBtn.disabled = false;
					oBtn.value = '开始游戏';
					clearInterval(this.timer);
					oBox.removeChild(oImg, oBox);

					alert('大神！请收我为徒~~');
					return;
				}

				clearTimeout(this.timer);				//防止多次清除后面生成的图片
				this.timer = setTimeout(function() {
					oBox.removeChild(oImg, oBox);
					createImg();
					get ++;								//写在定时器外会造成多次移入累加
				},1000);
				
				
			}
		}
	}

	function doMove(obj,attr,dir,target,endFn){
		clearInterval(obj.timer)
		
		obj.timer = setInterval(function(){
			var nextPos = parseInt(getStyle(obj,attr)) + dir;
			if(nextPos > target){
				nextPos = target;
			}
				
			obj.style[attr] = nextPos + 'px';
			
			if (nextPos == target) {
				clearInterval(obj.timer);
				endFn && endFn();
			}
		},30)
	}

	function shake( obj, attr, endFn ){
		if ( obj.finished ) {
			return;
		};
		obj.finished = true;			//解决隐患

		var arr = [];
		var num = 0;
		var pos = parseInt(getStyle( obj, attr ));		//有隐患

		for (var i=20;i>0;i-=2){
			arr.push(i,-i)
		}
		arr.push(0);

		clearInterval( obj.timer );
		obj.timer = setInterval(function(){
			obj.style[attr] = pos + arr[num] + 'px';
			num ++;
			if (num === arr.length) {
				clearInterval( obj.timer );
				obj.finished = false;
				endFn && endFn();
			};
		},50)
	}

	function getStyle(obj, attr){
		return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
	}
	</script>
</head>
<body>
	<div id="title">
		<h2 id="gameName">表情消消乐</h2>
		<p id="details">游戏说明：点击“开始游戏”，随机掉下QQ表情，把鼠标划上去，千万别让它掉下去！！
划掉25个算你赢；掉下5个算你输 :)</p>
		<input id="btn" type="button" value="开始游戏" >
	</div>
	
	<div id="wrap">
		<div id="Points">
			<p>得分: <span>0</span>分</p>
			<p>失分: <span>0</span>分</p>
		</div>
		<div id="box"></div>
	</div>
	
</body>
</html>